<template>
    <div>
        <!-- 驾驶员排班 -->
        <div class="container">
            <!-- 标题栏 -->
            <el-row>
                <el-col :span="24" class="ticket-title">驾驶员排班</el-col>
            </el-row>
            <!-- 表单栏 -->
            <div class="bottom-container">
                <el-row>
                    <el-col :span="24" class="choose-container">
                        <el-form ref="form" :model="form">
                            <el-col :span="7">
                                <el-form-item label="班次日期" label-width="70px">
                                    <el-date-picker type="daterange" v-model="form.busdate"
                                                    value-format="yyyy-MM-dd"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="营运单位" label-width="120px">
                                    <el-autocomplete v-model="form.ccustom"
                                                     :fetch-suggestions="querySearchComp"></el-autocomplete>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="车牌号" label-width="110px">
                                    <el-autocomplete v-model="form.carno"
                                                     :fetch-suggestions="querySearchCarNum">
                                    </el-autocomplete>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="驾驶员" label-width="100px">
                                    <el-autocomplete v-model="form.drivers"
                                                     :fetch-suggestions="querySearchDriver">
                                        <template slot-scope="{ item }">
                                            <div>{{ item.value }}</div>
                                            <div>{{ item.prop }}</div>
                                        </template>
                                    </el-autocomplete>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="班次状态" label-width="70px">
                                    <el-select v-model="form.busstau" placeholder="请选择">
                                        <el-option
                                                v-for="item in busStatusList"
                                                :key="item.key"
                                                :label="item.value"
                                                :value="item.key">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="5">
                                <el-form-item label="班次筛选" label-width="120px">
                                    <el-select v-model="form.bustype">
                                        <el-option
                                                v-for="item in busPlanTypeList"
                                                :key="item.key"
                                                :label="item.label"
                                                :value="item.value">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="车站" label-width="90px">
                                    <el-select v-model="form.busstation">
                                        <el-option
                                                v-for="item in busstationList"
                                                :key="item.id"
                                                :label="item.name"
                                                :value="item.id">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-form>
                        <button class="check-btn form-btn" @click="check"><img
                                src="../../assets/imgs/operation_btn_icon_chaxun_default.png" alt="" class="btn-img">查询



                        </button>
                        <button class="check-btn form-btn2" @click=""><img
                                src="../../assets/imgs/operation_btn_icon_kaishixiazai_default copy.png" alt=""
                                class="btn-img">导出Excel表格



                        </button>
                    </el-col>
                </el-row>

            </div>
            <div style="margin-top:15px">
                <el-row type="flex" :gutter="1">
                    <el-col v-if="datearr.length" class="car-list-date-bg" :span="1" align="center">时间</el-col>
                    <el-col :span="3" v-for="item in datearr">
                        <div class="car-list-date-bg" align="center">{{item}}</div>
                    </el-col>
                </el-row>
                <el-row type="flex" v-for="t in timearr" :gutter="1">
                    <el-col class="timestyle" :span="1" align="center">{{t}}</el-col>
                    <el-col :span="3" v-for="item in datearr">
                        <div v-for="cellitem in cell[item+'_'+t] || []">
                            <el-popover
                                    placement="top-start"
                                    width="150px"
                                    trigger="hover"
                                    visible-arrow="false"
                                    offset="14">
                                <div align="center" class="lineManagelinename">线路：{{cellitem.linename}}</div>
                                <div align="center" class="carManagelinename">班次号：{{cellitem.bus_id}}</div>
                                <div class="separator" v-if="cellitem.driver_1_name"></div>
                                <div align="center" class="driversManage" v-if="cellitem.driver_1_name">
                                    驾驶员：{{cellitem.driver_1_name}}



                                </div>
                                <div align="center" class="driversManage" v-if="cellitem.driver_1_driving_license_no">
                                    资格证号：{{cellitem.driver_1_driving_license_no}}



                                </div>
                                <div class="separator" v-if="cellitem.driver_2_name"></div>
                                <div align="center" class="driversManage" v-if="cellitem.driver_2_name">
                                    驾驶员：{{cellitem.driver_2_name}}



                                </div>
                                <div align="center" class="driversManage" v-if="cellitem.driver_2_driving_license_no">
                                    资格证号：{{cellitem.driver_2_driving_license_no}}



                                </div>
                                <div class="separator" v-if="cellitem.driver_3_name"></div>
                                <div align="center" class="driversManage" v-if="cellitem.driver_3_name">
                                    驾驶员：{{cellitem.driver_3_name}}



                                </div>
                                <div align="center" class="driversManage" v-if="cellitem.driver_3_driving_license_no">
                                    资格证号：{{cellitem.driver_3_driving_license_no}}



                                </div>
                                <div slot="reference" align="center"
                                     :class="cellitem.driver_1_name == null && cellitem.driver_2_name == null　&& cellitem.driver_3_name == null?'grid-content' : 'grid-content2'">
                                    <div id="driverinfo" @click="driverinfo(cellitem,coachStationname)">
                                        {{driverShow(cellitem)}}


                                    </div>
                                </div>
                            </el-popover>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!--遮罩层-->
        <div class='popContainer' v-show="modelShow"></div>
        <!--弹窗页面部分-->
        <div class="management-modal-win" v-show="modelShow">
            <!-- 标题 -->
            <el-row>
                <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">{{modalTitle}}</div>
                    <div class="rf close" @click="closeModual()">X</div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <div class="msg-win">
                        <!-- 修改弹窗 -->
                        <div>
                            <el-row class="driver-container">
                                <el-col>
                                    <el-form :inline="true" :model="formwindows" class="demo-form-inline">

                                        <el-form-item class="input-item" label="　　线路">
                                            <el-input :disabled="true" v-model="formwindows.line"></el-input>
                                        </el-form-item>

                                        <el-form-item label="　　　　车站">
                                            <el-input :disabled="true" v-model="formwindows.station"></el-input>
                                        </el-form-item>

                                        <el-form-item label="班次日期">
                                            <el-input :disabled="true" v-model="formwindows.busdate"></el-input>
                                        </el-form-item>

                                        <el-form-item label="　　　班次号">
                                            <el-input :disabled="true" v-model="formwindows.busno"></el-input>
                                        </el-form-item>

                                        <el-form-item label="计划车牌">
                                            <el-input :disabled="true" v-model="formwindows.carno"></el-input>
                                        </el-form-item>
                                        <div>
                                            <el-form-item label="驾驶员1">
                                                <el-autocomplete v-model="formwindows.busdriver1"
                                                                 :fetch-suggestions="querySearchDriver">
                                                    <template slot-scope="{ item }">
                                                        <div>{{ item.value }}</div>
                                                    </template>
                                                </el-autocomplete>
                                            </el-form-item>
                                            <el-form-item v-if="" label="从业资格证号">
                                                <el-input :disabled="true" v-model="formwindows.job_cardno1"></el-input>
                                            </el-form-item>
                                        </div>
                                        <div>
                                            <el-form-item label="驾驶员2">
                                                <el-autocomplete v-model="formwindows.busdriver2"
                                                                 :fetch-suggestions="querySearchDriver">
                                                    <template slot-scope="{ item }">
                                                        <div>{{ item.value }}</div>
                                                    </template>
                                                </el-autocomplete>
                                            </el-form-item>
                                            <el-form-item v-if="" label="从业资格证号">
                                                <el-input :disabled="true" v-model="formwindows.job_cardno2"></el-input>
                                            </el-form-item>
                                        </div>
                                        <div>
                                            <el-form-item label="驾驶员3">
                                                <el-autocomplete v-model="formwindows.busdriver3"
                                                                 :fetch-suggestions="querySearchDriver">
                                                    <template slot-scope="{ item }">
                                                        <div>{{ item.value }}</div>
                                                    </template>
                                                </el-autocomplete>
                                            </el-form-item>
                                            <el-form-item v-if="" label="从业资格证号">
                                                <el-input :disabled="true" v-model="formwindows.job_cardno3"></el-input>
                                            </el-form-item>
                                        </div>
                                    </el-form>
                                </el-col>
                            </el-row>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <button class="check-btn rf" @click="closeformwindows"><img
                            src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt=""
                            class="btn-img">取消



                    </button>
                    <button class="check-btn rf" @click="sendmanagement"><img
                            src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt=""
                            class="btn-img">确定



                    </button>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    import qs from "qs";
    import FormData from "../../components/common/form";
    import TableData from "../../components/common/tableData";

    export default {
        data: function () {
            return {
                cell: {},
                datearr: [],
                timearr: [],
                datearrfoamat:[],
                driverids: "",
                coachStationid: "",
                coachStationname: "",
                formwindowsid: "",
                formwindowsbustime: "",
                planed_driver_1id: "",
                planed_driver_2id: "",
                planed_driver_3id: "",
                formwindows: {
                    line: "",
                    station: "",
                    busdate: "",
                    busno: "",
                    carno: "",
                    busdriver1: "",
                    busdriver2: "",
                    busdriver3: "",
                    job_cardno1: "",
                    job_cardno2: "",
                    job_cardno3: "",
                },
                modelShow: false,
                modalTitle: "",
                form: {
                    busdate: "",
                    ccustom: "",
                    carno: "",
                    drivers: "",
                    busstau: "",
                    bustype: "",
                    busstation: "",
                },
                ccustomid: "",
                compList: [],
                carNumList: [],
                driverList: [],
                busStatusList: [],
                busstationList: [],
                busPlanTypeList: [
                    {
                        value: '0',
                        label: '所有班次'
                    },
                    {
                        value: '1',
                        label: '有计划班次'
                    },
                    {
                        value: '2',
                        label: '无计划班次'
                    }
                ],
            };
        },
        methods: {
            //营运单位自动补全
            querySearchComp(queryString, cb) {
                var arr = this.compList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //
            createFilter(queryString) {
                return arr => {
                    return arr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
                };
            },
            //营运单位请求
            loadComp() {
                var arr = [];
                this.$http
                    .post("/sch/data/bus_company/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.name, prop: c.id});
                        }
                        console.log(arr);
                    });
                return arr;
            },
            // 车牌自动补全
            querySearchCarNum(queryString, cb) {
                var arr = this.carNumList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //车牌请求
            loadCarNum() {
                var arr = [];
                this.$http
                    .post("/sch/data/bus_vehicle/listWithSpell")
                    .then(data => {
                        for (var c of data.data) {
                            arr.push({value: c.vehi_no});
                        }
                    });
                return arr;
            },
            // 驾驶员自动补全
            querySearchDriver(queryString, cb) {
                var arr = this.driverList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //驾驶员请求
            loadDriver() {
                var arr = [];
                this.$http
                    .post("/sch/data/driver/listWithSpell")
                    .then(data => {
                        for (var d of data.data) {
                            arr.push({value: d.name, prop: d.job_cardno, no: d.id});
                        }
                    });
                return arr;
            },
            //班次状态列表
            loadbusPlanType(){
                this.$http
                    .post("/sch/data/common/busstatus")
                    .then(data => {
                        this.busStatusList = data.data;
                    })
            },
            //站点列表自动补全
            querySearchbusstation(queryString, cb) {
                var arr = this.busstationList;
                var results = queryString
                    ? arr.filter(this.createFilter(queryString))
                    : arr;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            //站点请求
            loadbusstation(){
                this.$http
                    .post("/sys/org/coachStation")
                    .then(data => {
                        this.busstationList = data.data;
                        this.form.busstation = this.busstationList.length > 0 ? this.busstationList[0].id : 0
                    })
            },
            //设置默认日期
//            definedate(){
//                let now = new Date();
//                console.log(now);
//                let startDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
//                let endDate = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())).toISOString().slice(0, 10);
//                console.log(startDate);
//                console.log(endDate);
//                this.form.busdate[0] = startDate;
//                this.form.busdate[1] = startDate;
//                console.log(this.form.busdate);
//            },
//            //日期格式化
//            "Date.prototype.Format"(fmt)
//            {
//                var o = {
//                    "M+": this.getMonth() + 1,                 //月份
//                    "d+": this.getDate(),                    //日
//                    "h+": this.getHours(),                   //小时
//                    "m+": this.getMinutes(),                 //分
//                    "s+": this.getSeconds(),                 //秒
//                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
//                    "S": this.getMilliseconds()             //毫秒
//                };
//                if (/(y+)/.test(fmt))
//                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
//                for (var k in o)
//                    if (new RegExp("(" + k + ")").test(fmt))
//                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
//                return fmt;
//            },
//            //日期数组格式化
//            datearrFormat(){
//                let date = new Date("2018-10-06");
//                console.log(date);
//                let datefmt = date.DateFormat("yyyy-MM-dd hh:mm:ss");
//                console.log(datefmt);
//                if(this.datearr.length==0){
//
//                }else {
//                    for(let item of this.datearr){
//                        let datefmt = item.DateFormat("MM-dd");
//                        this.datearrfoamat.push(datefmt);
//                    }
//                    console.log(this.datearrfoamat)
//                }
//            },
            //查询
            check(){
                let t = this;
                console.log(t.form.busdate[0]);
                console.log(t.form.busdate[1]);
                console.log(t.ccustomid);
                console.log(t.driverids);
                console.log(t.form.busstation);
                ////站点id转换名字
                this.coachStationid = t.form.busstation;
                for (var item of this.busstationList) {
                    if (this.coachStationid == item.id) {
                        this.coachStationname = item.name;
                        break;
                    } else {
                        this.coachStationname = "";
                    }
                }
                console.log(this.coachStationname);

                this.$http
                    .get(
                        '/enterprise/scheduling/driver/timetable'
                        , {
                            params: {
                                start_date: t.form.busdate[0],
                                end_date: t.form.busdate[1],
                                customer_id: t.ccustomid,
                                vehino: t.form.carno,
                                driverId: t.driverids,
                                busStatus: t.form.busstau,
                                busPlanType: t.form.bustype,
                                coachStation: t.form.busstation,
                            }
                        }
                    )
                    .then(data => {
                        let cell = {};
                        let alldate = {};
                        let alltime = {};
                        let redata = data.data;
                        for (let k of Object.keys(redata)) {
                            (redata[k] || []).forEach(e => {
                                alldate[e.bus_date] = e.bus_date;
                                alltime[e.bus_time] = e.bus_time;
                                let k = e.bus_date + "_" + e.bus_time;
                                let v = cell[k] || [];
                                cell[k] = v;
                                v.push(e);
                            });
                        }
                        this.cell = cell;
                        this.datearr = Object.keys(alldate);
                        this.timearr = Object.keys(alltime);
                        console.log(this.datearr);
                        console.log(alldate);
                    });
            },
            //导出excel表格
            load(){
                let t = this;
                this.$http
                    .get(
                        '/enterprise/scheduling/driver/export'
                        , {
                            params: {
                                ft: excel,
                                start_date: t.form.busdate[0],
                                end_date: t.form.busdate[1],
                                customer_id: t.ccustomid,
                                vehino: t.form.carno,
                                busStatus: t.form.busstau,
                                busPlanType: t.form.bustype,
                                coachStation: t.form.busstation,
                            }
                        }
                    )
            },
            //获取弹窗
            driverinfo(info, parstation){
                console.log(info);
                console.log(parstation);
                this.modelShow = true;
                this.modalTitle = "驾驶员排班";
                console.log(this.driverList);
                console.log(info.id);
                this.formwindowsid = info.id;
                this.formwindowsbustime = info.bus_time;
                this.planed_driver_2id = info.planed_driver_2;
                this.planed_driver_3id = info.planed_driver_3;

                this.formwindows = {
                    line: info.linename,
                    station: parstation,
                    busdate: info.bus_date,
                    busno: info.bus_id,
                    carno: info.vehi_no,
                    busdriver1: info.driver_1_name,
                    busdriver2: info.driver_2_name,
                    busdriver3: info.driver_3_name,
                }
            },
            //关闭弹窗
            closeModual() {
                this.modelShow = false;
            },
            //关闭弹窗
            closeformwindows() {
                this.modelShow = false;
            },
            //保存修改
            sendmanagement() {
                this.$http
                    .get(
                        '/sch/bus/plan/update'
                        , {
                            params: {
                                "busPlan.id": this.formwindowsid,
                                linename: this.formwindows.line,
                                bus_date: this.formwindows.busdate,
                                bus_time: this.formwindowsbustime,
                                vehi_no: this.formwindows.carno,
                                "busPlan.planed_driver_1": this.planed_driver_1id,
                                "busPlan.planed_driver_2": this.planed_driver_2id,
                                "busPlan.planed_driver_3": this.planed_driver_3id,
                            }
                        }
                    )
                    .then(data => {
                        if (data.data[0] == 0) {
                            this.$message({
                                message: data.data[1],
                                type: "success"
                            });
                            this.closeformwindows();
                            this.check();
                        } else {
                            this.$message.error(data.data[1]);
                        }
                    });
            },
            //判断计划驾驶人是否为空
            driverShow(obj){
                if (obj.driver_1_name == null && obj.driver_2_name == null && obj.driver_3_name == null) {
                    return '无计划驾驶员'
                } else {
                    let a = [];
                    if (obj.driver_1_name)
                        a.push(obj.driver_1_name);
                    if (obj.driver_2_name)
                        a.push(obj.driver_2_name);
                    if (obj.driver_3_name)
                        a.push(obj.driver_3_name);
                    return a.toString()
                }
            },
            //获取列表
//            getDetailList() {
//                this.$http
//                    .post("/enterprise/scheduling/driver/timetable?start_date=2018-10-08&end_date=2018-10-12&customer_id=&vehino=&driverId=&busStatus=1&busPlanType=0&coachStation=265")
//                    .then(data => {
//                        let cell = {};
//                        let alldate = {};
//                        let alltime = {};
//                        let redata = data.data;
//                        for (let k of Object.keys(redata)) {
//                            (redata[k] || []).forEach(e => {
//                                alldate[e.bus_date] = e.bus_date;
//                                alltime[e.bus_time] = e.bus_time;
//
//                                let k = e.bus_date + "_" + e.bus_time;
//                                let v = cell[k] || [];
//                                cell[k] = v;
//                                v.push(e);
//                            });
//                        }
//                        this.cell = cell;
//                        this.datearr = Object.keys(alldate);
//                        this.timearr = Object.keys(alltime);
//                    });
//            }
        },
        components: {FormData, TableData},
        watch: {
            //侦听营运单位，并转换id
            "form.ccustom": {
                handler(curVal, oldVal){
                    console.log(curVal, oldVal);
                    if (this.form.ccustom == "") {
                        this.ccustomid = "";
                    } else {
                        for (var item of this.compList) {
                            if (this.form.ccustom == item.value) {
                                this.ccustomid = item.prop;
                                break;
                            } else {
                                this.ccustomid = "";
                            }
                        }
                        console.log(this.ccustomid)
                    }
                },
                deep: true
            },
            //侦听驾驶员，并转换成id
            "form.drivers": {
                handler(curVal, oldVal){
                    console.log(curVal, oldVal);
                    if (this.form.drivers == "") {
                        this.driverids = "";
                    } else {
                        for (var item of this.driverList) {
                            if (this.form.drivers == item.value) {
                                this.driverids = item.no;
                                break;
                            } else {
                                this.driverids = "";
                            }
                        }
                        console.log(this.driverids)
                    }
                },
                deep: true
            },
            //侦听驾驶员1，并转换成从业资格证号，获取驾驶员1id
            "formwindows.busdriver1": {
                handler(curVal, oldVal){
                    console.log(curVal, oldVal);
                    if (this.formwindows.busdriver1 == "") {
                        this.formwindows.job_cardno1 = "";
                        this.planed_driver_1id = "";
                    } else {
                        for (var item of this.driverList) {
                            if (this.formwindows.busdriver1 == item.value) {
                                this.formwindows.job_cardno1 = item.prop;
                                this.planed_driver_1id = item.no;
                                break;
                            } else {
                                this.formwindows.job_cardno1 = "";
                                this.planed_driver_1id = "";
                            }
                        }
                        console.log(this.formwindows.job_cardno1);
                        console.log(this.planed_driver_1id);
                    }
                },
                deep: true
            },
            //侦听驾驶员2，并转换成从业资格证号
            "formwindows.busdriver2": {
                handler(curVal, oldVal){
                    console.log(curVal, oldVal);
                    if (this.formwindows.busdriver2 == "") {
                        this.formwindows.job_cardno2 = "";
                        this.planed_driver_2id = "";
                    } else {
                        for (var item of this.driverList) {
                            if (this.formwindows.busdriver2 == item.value) {
                                this.formwindows.job_cardno2 = item.prop;
                                this.planed_driver_2id = item.no;
                                break;
                            } else {
                                this.formwindows.job_cardno2 = "";
                                this.planed_driver_2id = "";

                            }
                        }
                        console.log(this.formwindows.job_cardno2);
                        console.log(this.planed_driver_2id);
                    }
                },
                deep: true
            },
            //侦听驾驶员3，并转换成从业资格证号
            "formwindows.busdriver3": {
                handler(curVal, oldVal){
                    console.log(curVal, oldVal);
                    if (this.formwindows.busdriver3 == "") {
                        this.formwindows.job_cardno3 = "";
                        this.planed_driver_3id = "";
                    } else {
                        for (var item of this.driverList) {
                            if (this.formwindows.busdriver3 == item.value) {
                                this.formwindows.job_cardno3 = item.prop;
                                this.planed_driver_3id = item.no;
                                break;
                            } else {
                                this.formwindows.job_cardno3 = "";
                                this.planed_driver_3id = "";
                            }
                        }
                        console.log(this.formwindows.job_cardno3)
                        console.log(this.planed_driver_3id)
                    }
                },
                deep: true
            }
        },
        mounted() {
            console.log("驾驶员排班查询");
            this.$emit("sendActive", "1-3");
//            this.getDetailList();
            this.compList = this.loadComp();
            this.carNumList = this.loadCarNum();
            this.driverList = this.loadDriver();
            this.loadbusPlanType();
            this.busstationList = this.loadbusstation();
//            this.definedate();
        }
    };
</script>
<style scoped src="../../assets/css/carManage/driverSchedul.css">
</style>